<template>
	<wd-config-provider theme="dark">
		<div class="new-ques-container">
			<!--题型选择-->
			<div class="ques-line" style="margin-bottom: -20px;">
				<div class="h1-line">
					<div class="h1">题型选择：</div>
					<div style="flex: 1;"></div>
					<!--选择器-->
					<div class="picker-container">
						<wd-picker @confirm="selectCategory" z-index="999" v-model="customNewQues.category" :columns="quesTypeColumns" filterable></wd-picker>
					</div>
				</div>
			</div>
			<!--作文翻译-->
			<div v-if="customNewQues.category === 'zuowen' || customNewQues.category === 'fanyi'">
				<!--题目-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1">题目：</div>
					<textarea auto-height maxlength="-1" v-model="customNewQues.content" class="text-area"></textarea>
					<div class="btns-container">
						<button v-if="customNewQues.category === 'zuowen'" @click="ocrCommenSend('zuowentimu', 10000)"><wd-icon name="camera" size="20px"></wd-icon></button>
						<button v-if="customNewQues.category === 'fanyi'" @click="ocrCommenSend('fanyitimu', 10000)"><wd-icon name="camera" size="20px"></wd-icon></button>
						<div></div>
					</div>
				</div>
				<!--领域-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1-line">
						<div class="h1" style="margin-bottom: 0;">领域：</div>
						<div style="flex: 1;"></div>
						<input style="width: 160px; padding: 4px 12px; background-color: #ffffff11;" v-model="customNewQues.field"/>
					</div>
				</div>
				<!--错因-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1-line">
						<div class="h1" style="margin-bottom: 0;">错因：</div>
						<div style="flex: 1;"></div>
						<input style="width: 160px; padding: 4px 12px; background-color: #ffffff11;" v-model="customNewQues.falseReason"/>
					</div>
				</div>
				<!--标准答案-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1">标准答案：</div>
					<textarea auto-height maxlength="-1" v-model="customNewQues.answer" class="text-area"></textarea>
					<div class="btns-container">
						<button @click="ocrCommenSend('zuowen', 10001)"><wd-icon name="camera" size="20px"></wd-icon></button>
						<div></div>
					</div>
				</div>
				<!--我的作答-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1">我的作答：</div>
					<textarea auto-height maxlength="-1" v-model="customNewQues.stuAnswer" class="text-area"></textarea>
					<div class="btns-container">
						<button @click="ocrCommenSend('zuowen', 10002)"><wd-icon name="camera" size="20px"></wd-icon></button>
						<button @click="aiAnalyseBtn()">AI一键分析</button>
					</div>
				</div>
				<!--智能分析-->
				<div class="ques-line">
					<div class="h1">智能分析：</div>
					<p>{{customNewQues.aiComment}}</p>
				</div>
				<!--用户备注-->
				<div class="ques-line dark-purple-card ques-line-card">
					<div class="h1">用户备注：</div>
					<textarea auto-height maxlength="-1" v-model="customNewQues.userComment" class="text-area"></textarea>
				</div>
				<!--新增错题-->
				<div class="sure-btn-container">
					<button class="sure-btn" @click="addNewQuesBtn()">新增错题</button>
				</div>
			</div>
			<!--阅读选择-->
			<div v-if="customNewQues.category === 'yuedu' || customNewQues.category === 'xuanze'">
				<div class="ques-line">
					<!--文章-->
					<div class="ques-line">
						<div class="h1-line">
							<div class="h1" v-if="customNewQues.category === 'xuanze'">题目：</div>
							<div class="h1" v-if="customNewQues.category === 'yuedu'">文章：</div>
							<div class="tag-container">
								<div class="tag">{{customNewQues.category === 'xuanze' ? '选择' : '阅读'}}</div>
								<div class="tag" v-if="customNewQues.field !== undefined && customNewQues.field !== null && customNewQues.field">{{customNewQues.field}}</div>
							</div>
						</div>
						<textarea v-if="customNewQues.category === 'xuanze'" auto-height maxlength="-1" v-model="customNewQues.problem" class="text-area"></textarea>
						<textarea v-if="customNewQues.category === 'yuedu'" auto-height maxlength="-1" v-model="customNewQues.content" class="text-area"></textarea>
						<div class="btns-container" >
							<button v-if="customNewQues.category === 'xuanze'" @click="ocrCommenSend('xuanze', 10000)"><wd-icon name="camera" size="20px"></wd-icon></button>
							<button v-if="customNewQues.category === 'yuedu'" @click="ocrCommenSend('yuedutimu', 10000)"><wd-icon name="camera" size="20px"></wd-icon></button>
							<div></div>
						</div>
					</div>
					<!--选择-->
					<div v-if="customNewQues.category === 'xuanze'">
						<!--选项-->
						<XuanzeCard mode="insert"
									:choice1="customNewQues.choice1" 
									:choice2="customNewQues.choice2"
									:choice3="customNewQues.choice3" 
									:choice4="customNewQues.choice4"
									:stuAnswer="customNewQues.stuAnswer"
									:answer="customNewQues.answer"
									@changeAnswer="(newAnswer)=>{customNewQues.answer = newAnswer}"
									@changeStuAnswer="(newAnwer)=>{customNewQues.stuAnswer = newAnwer}"></XuanzeCard>
						<!--AI分析-->
						<div class="sure-btn-container">
							<button class="sure-btn" @click="aiAnalyseBtn()">一键AI分析</button>
						</div>
						<!--智能分析-->
						<div class="ques-line">
							<div class="h1">智能分析：</div>
							<div>customNewQues.aiComment</div>
						</div>
						<!--错因-->
						<div class="ques-line dark-purple-card ques-line-card">
							<div class="h1-line">
								<div class="h1" style="margin-bottom: 0;">错因：</div>
								<div style="flex: 1;"></div>
								<input style="width: 160px; padding: 4px 12px; background-color: #ffffff11;" v-model="customNewQues.falseReason"/>
							</div>
						</div>
						<!--用户备注-->
						<div class="ques-line dark-purple-card ques-line-card">
							<div class="h1">用户备注：</div>
							<textarea auto-height maxlength="-1" v-model="customNewQues.userComment" class="text-area"></textarea>
						</div>
						<!--新增错题-->
						<div class="sure-btn-container">
							<button class="sure-btn" @click="addNewQuesBtn()">新增错题</button>
						</div>
					</div>
					<!--阅读-->
					<div v-if="customNewQues.category === 'yuedu'">
						<!--题目-->
						<div style="margin-top: 36px;" v-for="(exer, yueduIndex) in customNewQues.cuoTiList">
							<!--题目-->
							<div class="ques-line">
								<div class="h1">题目{{Number(yueduIndex+1)}}:</div>
								<textarea auto-height maxlength="-1" v-model="exer.problem" class="text-area"></textarea>
							</div>
							<!--选项-->
							<XuanzeCard mode="insert"
										:choice1="exer.choice1" 
										:choice2="exer.choice2"
										:choice3="exer.choice3" 
										:choice4="exer.choice4"
										:stuAnswer="exer.stuAnswer"
										:answer="exer.answer"
										@changeAnswer="(newAnswer)=>{exer.answer = newAnswer}"
										@changeStuAnswer="(newAnwer)=>{exer.stuAnswer = newAnwer}"></XuanzeCard>
							<!--智能分析-->
							<div class="ques-line">
								<div class="h1">智能分析：</div>
								<p>{{exer.aiComment}}</p>
							</div>
							<!--删除本道-->
							<div class="btns-container" >
								<button @click="ocrCommenSend('xuanze', yueduIndex)"><wd-icon name="camera" size="20px"></wd-icon></button>
								<button @click="deleteXuanze(yueduIndex)"><wd-icon name="delete" size="20px"></wd-icon></button>
							</div>
							<!--分割线-->
							<wd-divider></wd-divider>
						</div>
						<div class="sure-btn-container">
							<button class="sure-btn" style="background-color: #aaa;" @click="addXuanze()">新增选择</button>
						</div>
						<!--AI分析-->
						<div class="sure-btn-container">
							<button class="sure-btn" @click="aiAnalyseBtnYueDu()">一键AI分析</button>
						</div>
						<!--用户备注-->
						<div class="ques-line dark-purple-card ques-line-card">
							<div class="h1">用户备注：</div>
							<textarea auto-height maxlength="-1" v-model="customNewQues.userComment" class="text-area"></textarea>
						</div>
						<!--新增错题-->
						<div class="sure-btn-container">
							<button class="sure-btn" @click="addNewQuesBtn()">新增错题</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</wd-config-provider>
	
</template>

<script setup>
	import { toRefs, defineProps, ref } from 'vue'
	import { globalProps } from '../js/global';
	import XuanzeCard from '@/components/XuanzeCard.vue'
	import { currentOCR } from '@/js/ques';
	
	const addXuanze = ()=>{
		customNewQues.value.cuoTiList.push({
                    "id": 78,
                    "category": null,
                    "problem": null,
                    "answer": null,
                    "sonProID": null,
                    "score": 0,
                    "choiceNum": 4,
                    "level": 0,
                    "field": null,
                    "knowledgeIDs": null,
                    "choice1": null,
                    "choice2": null,
                    "choice3": null,
                    "choice4": null,
                    "content": null,
                    "stuAnswer": null,
                    "aiComment": null,
                    "falseReason": null,
                    "userComment": null,
                    "sonExercise": null,
                    "cuoTiList": null,
                    "esID": null,
                    "single": false,
                    "existed": true
                })
	}
	const deleteXuanze = (index)=>{
		customNewQues.value.cuoTiList.splice(index, 1)
	}
	
	//使用父组件传递过来的值
	const props = defineProps({
	  customNewQues: JSON,
	})
	const customNewQues = ref(JSON.parse(JSON.stringify(props.customNewQues)))
	
	//题型
	const quesTypeColumns = ref([
		{
		  value: 'yuedu',
		  label: '阅读'
		},
		{
	      value: 'xuanze',
	      label: '选择'
	    },
	    {
	      value: 'fanyi',
	      label: '翻译'
	    },
		{
		  value: 'zuowen',
		  label: '作文'
		},
	])
	const selectCategory = ()=>{
		if(customNewQues.value.category === 'fanyi' || customNewQues.value.category === 'zuowen'){
			//阅读作文格式
			customNewQues.value = {
			  "stuID": customNewQues.value.stuID,
			  "category": customNewQues.value.category,
			  "field": customNewQues.value.field,
			  "answer": null,
			  "content": customNewQues.value.content,
			  "esID": customNewQues.value.esID,
			  "stuAnswer": null,
			  "falseReason": null,
			  "aiComment": null,
			  "cuoTiList": null,
			  "userComment": null
			}
		}else if(customNewQues.value.category === 'yuedu' || customNewQues.value.category === 'xuanze'){
			customNewQues.value = {
			  "stuID": customNewQues.value.stuID,
			  "category": customNewQues.value.category,
			  "field": customNewQues.value.field,
			  "content": customNewQues.value.content,
			  "esID": customNewQues.value.esID,
			  "cuoTiList": [],
			  "problem": null,
			  "answer": null,
			  "choice1": null,
			  "choice2": null,
			  "choice3": null,
			  "choice4": null,
			  "stuAnswer": null,
			  "aiComment": null,
			  "falseReason": null,
			}
		}
	}
	/**
	 * 作文翻译
	 */
	//OCR
	const ocrCommenSend = (type, position)=>{
		//zuowentimu
		currentOCR.mode = type
		uni.$on('acceptOcrCommon',(res)=>{
			//10000题目 10001标准答案 10002用户答案 其他为阅读index
			switch(position){
				case 10000:
					const zuowentimuJson = JSON.parse(res);
					customNewQues.value = zuowentimuJson;
					break;
				case 10001:
					customNewQues.value.answer = res
					break;
				case 10002:
					customNewQues.value.stuAnswer = res
					break;
				default:
					const responseXuanze = JSON.parse(res)
					customNewQues.value.cuoTiList[position].choice1 = responseXuanze.choice1
					customNewQues.value.cuoTiList[position].choice2 = responseXuanze.choice2
					customNewQues.value.cuoTiList[position].choice3 = responseXuanze.choice3
					customNewQues.value.cuoTiList[position].choice4 = responseXuanze.choice4
					customNewQues.value.cuoTiList[position].stuAnswer = responseXuanze.stuAnswer
					customNewQues.value.cuoTiList[position].answer = responseXuanze.answer
					customNewQues.value.cuoTiList[position].problem = responseXuanze.problem
					break;
			}
			uni.$off('acceptOcrCommon')
		})
		uni.navigateTo({
			url: '/pages/newques/CameraPage/CameraPage'
		})
	}
	//AI分析
	const aiAnalyseBtn = ()=>{
		const sendData = customNewQues.value
		console.log('AI错题分析上传数据'+sendData)
		uni.showLoading({
		    title: '分析中...'
		});
		uni.request({
		  url: globalProps.baseApi + 'cuotiji',
		  method: 'POST',
		  data: sendData,
		  success: function (res) {
			uni.hideLoading();
			const zuowenResult = zuowenPostResultToAiComment(res.data)
			customNewQues.aiComment = zuowenResult;
		  },
		  fail: function (err) {
		    console.log('AI分析请求失败', err);
		    uni.showToast({
		    	title: '请求失败',
		    	icon: 'error'
		    })
		  }
		});
	}
	//上传题目
	const addNewQuesBtn = ()=>{
		const sendData = customNewQues.value
		console.log(sendData)
		uni.showLoading({
		    title: '添加中...'
		});
		uni.request({
		  url: globalProps.baseApi + 'cuotiji/addCuotiFromExe',
		  method: 'POST',
		  data: sendData,
		  success: function (res) {
			uni.hideLoading();
			uni.showToast({
				title: '添加成功',
				icon: 'success'
			})
			setTimeout(()=>{
				uni.switchTab({
					url: '/pages/HomePage/HomePage'
				})
			},1800)
		  },
		  fail: function (err) {
		    console.log('添加错题失败', err);
		    uni.showToast({
		    	title: '请求失败',
		    	icon: 'error'
		    })
		  }
		});
	}
	
	/**
	 * 阅读选择
	 */
	
	
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	
	.new-ques-container{
		
	}
	.ques-line{
		color: #fff;
		padding: 12px 4px;
		white-space: pre-line;
		word-break: break-all;
		display: flex;
		flex-direction: column;
	}
	.ques-line .btns-container{
		margin: 16px 0 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ques-line .btns-container button{
		padding: 4px 20px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin: 0;
		color: #fff;
	}
	.ques-line .btns-container button:nth-child(2){
		background-color: #4942ad;
	}
	.ques-line .btns-container button:nth-child(1){
		background-color: #888;
	}
	.ques-line .text-area{
		width: calc(100% - 16px);
		min-height: 28px;
		height: auto;
		background-color: #ffffff11;
		padding: 8px;
		z-index: 0;
		white-space: pre-line;
	}
	.h1{
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 18px;
		margin-bottom: 12px;
	}
	.sure-btn-container{
		margin-bottom: 32px;
	}
	.sure-btn{
		margin: 12px 4px 24px 4px;
		width: calc(100% - 8px);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		background-color: #4942ad;
		color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 4px #00000022;
	}
	.ques-line-card{
		margin: 12px 0;
		padding: 12px;
		width: calc(100% - 26px);
		border-radius: 8px;
		border: 1px solid #2e4e99;
	}
	.h1-line{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.picker-container{
		width: 100px;
		margin-bottom: 12px;
	}
</style>